<template>
	<view class="a">
		<navbox></navbox>
		<view class="home" style="background-color: #fff;">
			<u-swiper :list="list3" indicator="true" indicatorMode="dot" height="230" circular></u-swiper>
			<!-- v-if="user.frentLink!==5&&user!==''" -->
			<swiper></swiper>
			<view class="hot_goods">
				<view class="tit">推荐图片</view>
				<goodslist :urls="urls"></goodslist>
			</view>
			<!-- <view class="hot_goods">
				<view class="tit">热门文章</view>
			</view> -->

			<!-- 	<view style="width: 100%;height: 10rpx;background-color: #eeeeee;"></view>
			<airlist :urls="urls"></airlist> -->


			<view>
				<u-modal :show="show1modal" :content='news[0].content' @confirm="confirm()"></u-modal>
			</view>

		</view>
	</view>

</template>

<script>
	import swiper from '../../components/swiper/swiper.vue'
	import goodslist from '@/components/goods-list/goods-list.vue'
	import navbox from '../../components/navboxs/navboxs.vue'
	import airlist from '../../components/airlist/airlist.vue'

	export default {
		data() {
			return {
				show1modal: false,
				list3: [],
				frentLink: uni.getStorageSync("user").frentLink,
				userId: uni.getStorageSync("user").id,
				totalPrice: "",
				index: 0,
				price: '',
				fun: '',
				time: '12:01',
				modalTitle: '',
				swipers: [],
				urls: [],
				page: {
					pageSize: 6,
					pageNum: 1,
				},
				total: '',
				user: {},
				news: [],
				timer: null,

			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onLoad() {
			if (this.timer) {
				clearTimeout(this.timer); // 清除定时器  
			}
			uni.showLoading({
				title: '加载中'
			});
			this.user = uni.getStorageSync("user")
			this.getSwipers()
			this.getHotGoods()
			if (uni.getStorageSync("settings").newsStatus === "1") {
				this.getNews()
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			this.page.pageNum = 1
			this.getHotGoods()
			if (uni.getStorageSync("settings").newsStatus === "1") {
				this.getNews()
			}
			this.timer = setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.getBottom()
		},
		methods: {
			async getBottom() {
				const that = this
				if (this.urls.length < this.total) {
					this.page.pageNum++
					uni.showLoading({
						title: '加载中'
					});
					uni.request({
						url: that.$baseurl + "/wexinLogin/pictures/selectHot",
						method: 'POST',
						data: that.page,
						success(res) {
							console.log(res)
							that.urls = [...that.urls, ...res.data.data.data.records]
						}
					})

					setTimeout(function() {
						uni.hideLoading();
					}, 800);
				}
			},
			// // 获取热门商品列表数据
			// async getHotGoods() {
			// 	const res = await this.$myRuquest({
			// 		url: '/wexinLogin/sgArticle/listALL',
			// 		method: "post",
			// 		data: this.page
			// 	})
			// 	this.urls = res.data.data.records
			// 	this.total = res.data.data.total
			// 	uni.hideLoading();
			// },
			// 获取热门商品列表数据
			async getHotGoods() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pictures/selectHot',
					method: "post",
					data: this.page
				})
				this.urls = res.data.data.data.records
				this.total = res.data.data.data.total
				uni.hideLoading();
			},
			async confirm() {
				if (this.news[0].userId !== 0) {
					const res = await this.$myRuquest({
						url: '/wexinLogin/settingNews/read?id=' + this.news[0].id
					})
				}
				this.show1modal = false
				this.news.shift()
				if (this.news.length > 0) {
					this.show1modal = true
				}
			},
			async getNews() {
				const res2 = await this.$myRuquest({
					url: '/wexinLogin/settingNews/newsListByUserId?userId=' + this.user.id
				})
				if (res2.data.data.length > 0) {
					this.news = res2.data.data
					this.show1modal = true
				}
			},


			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			// 获取轮播图的数据
			async getSwipers() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/settingNews/lunbo'
				})
				this.list3 = res.data.data.map(item => item.img)
			}

		},
		components: {
			"airlist": airlist,
			"navbox": navbox,
			"swiper": swiper,
			"goodslist": goodslist
		},
	}
</script>

<style lang="scss">
	swiper {
		height: 120rpx;
	}

	.grid2 {
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 160rpx;
		margin: 0 20rpx;
		background-color: #fff;
		position: relative;
		top: 20rpx;
	}

	.input {
		width: 86%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx auto;
		border: 2rpx solid #DCDEE0;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
		padding: 0 3%;
		box-sizing: border-box;
		border-radius: 10rpx;
	}


	.home {
		margin-top: 180rpx;

		.hot_goods {
			background: #f0f0f0;
			overflow: hidden;
			margin-top: 20px;

			.tit {
				height: 50px;
				line-height: 50px;
				color: $shop-color;
				text-align: center;
				letter-spacing: 30px;
				background: #fff;
				margin: 7rpx 0;
			}
		}

	}



	/* 遮罩层 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 窗口 */
	.modal-content {
		background-color: white;
		/* padding: 20px; */
		width: 700rpx;
		height: 590rpx;
		border-radius: 8rpx;
		position: relative;

		//modal-content下的第一个view
		view:first-child {
			padding: 8rpx;
			font-size: 50rpx;
			font-weight: bold;
			font-family: '宋体';
		}

		//modal-content下的第二个view
		view:nth-child(2) {
			padding: 40rpx;
			font-size: 40rpx;
			color: #000000
		}
	}

	.modal-content2 {
		background-color: white;
		/* padding: 20px; */
		width: 700rpx;
		height: 450rpx;
		border-radius: 8rpx;
		position: relative;

		//modal-content下的第一个view
		view:first-child {
			padding: 8rpx;
			font-size: 50rpx;
			font-weight: bold;
			font-family: '宋体';
		}

		//modal-content下的第二个view
		view:nth-child(2) {
			padding: 40rpx;
			font-size: 40rpx;
			color: #000000
		}
	}

	/* 按钮 */
	.modal-buttons {
		width: 100%;
		display: flex;
		bottom: 0;
		position: absolute;
	}

	.modal-buttons button {
		width: 100%;
		border: none;
	}

	.modal-buttons button:first-child {
		background-color: #1096f0;
		color: #fff;
		border-radius: 0;
	}

	.modal-buttons button:last-child {
		width: 100%;
		border-radius: 0px;
		background-color: #eaeaea;
		color: #74bfe7;
	}
</style>
